{% extends "admin/base_site.html" %}
{% load i18n %}

{% block extrahead %}
    <script type='text/javascript' >
	// Make sure this comes before loading other js!
	var letter_grade_required_for_pass = {{ letter_grade_required_for_pass }}; 
    </script>
	
    <link rel="stylesheet" type="text/css" href="/static/css/gradesheet.css" />
    <script type="text/javascript" src="/static/js/gradesheet.js"></script>
    
    <link rel="stylesheet" type="text/css" href="/static/css/fixedHeaderTable_default.css" />
    <script type="text/javascript" src="/static/js/jquery.fixedheadertable.min.js"></script>
    
    <script type="text/javascript"> 
	$(document).ready(function() {
	    $('.comment').hide();
	    $("#grade_form").mouseup(function(e){
		    e.preventDefault();
	    });
	    $('td.column_0.row_0 input').focus();
	    
	    fullscreen_table(false);
	    $(window).resize(function() {
		fullscreen_table(true);
	    });
	});
    </script> 
{% endblock %}

{% block content %}
    <h2> Grades - {{ course }} </h2>
    <form action="" method="post" enctype="multipart/form-data" class="noprint">
        {{ import_form }} 
        <input type="submit" value="Upload Grades" name="upload"/>
        <div>
            <a href="#" id="toggle_comments" class="toggle_comments" onclick='toggle_comments()'>Show Comments</a>
            <a href="#" id="toggle_comments" class="toggle_comments" style="display: none" onclick='toggle_comments()'>Hide Comments</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url ecwsp.grades.views.view_comment_codes %}" target="_blank"> View Comment Codes</a>
        </div>
    </form>
    
    <form action="" onsubmit="submit_form()" method="post">
	<div id="gradebook_div">
	    <table class="grades"  id="gradebook_table">
		<thead>
		    <tr>
			<th>Student</th>
			{% for mp in marking_periods %}
			    <th> {{ mp }} </th>
			{% endfor %}
			<th>Final</th>
		    </tr>
		</thead>
		<tbody>
		    {% for student in students %}
			{% with row_counter=forloop.counter0 %}
			<tr>
			    <td>
				{{ student }}
			    </td>
			    {% for mp in marking_periods %}
				<td id="tdc{{ forloop.counter0 }}_r{{ row_counter }}">
				    {% for grade in student.grades %}
					{% if grade.marking_period == mp %}
					    {% if edit %}
						<input
						    id="id_grade_{{ student.id }}_{{ grade.id }}"
						    name="grade_{{ grade.id }}"
						    value="{{ grade.get_grade }}"
						    class="grade_form"
						    size="7"
						    onkeydown="return keyboard_nav(event)"
						    onchange="student_grade_change(event,{{ student.id }})"
						/>
						<span class="comment">
						    <br/>
						    <textarea rows="2" onchange="mark_change(event)" name="comment_{{ grade.id }}" placeholder="Comment">{{ grade.comment }}</textarea>
						</span>
					    {% else %}
						{{ grade.grade }}
					    {% endif %}
					{% endif %}
				    {% endfor %}
				</td>
				{% if forloop.last %}
			    <td id="tdc{{ forloop.counter }}_r{{ row_counter }}">
				{% endif %}
			    {% endfor %}
				{% if edit_final %}
				    <input
					id="grade_final_{{ student.id }}"
					name="gradefinalform_{{ student.id }}"
					class="grade_form {% if student.final_override %}final_override{% endif %}"
					value="{{ student.final }}"
					size="7"
					onkeydown="return keyboard_nav(event)"
					onchange="mark_change(event)"
				    />
				    {% if student.final_override %}
					<img onclick="remove_grade(event,'grade_final_{{ student.id }}')" class="cancel" src="/static/images/cancel.png"/>
				    {% endif %}
				{% else %}
				    {{ student.final }}
				{% endif %}
			    </td>
			</tr>
			{% endwith %}
		    {% endfor %}
		</tbody>
	    </table>
	</div>
        {% if edit %}
	    <input type="submit" name="edit" value="Save grades"/> 
	{% endif %}
    </form>
    <span
{% endblock %}
